<template>
<el-scrollbar style="height:100%;">
    <div class="container p-40">
        <div>
            <el-form
                ref="basicForm"
                v-loading="loading"
                :rules="rules"
                :model="basicForm"
                label-width="100px"
            >
                <p class="f-17 m-b-20">基本信息</p>
                <template v-if="userType === 'personal'">
                    <el-row :gutter="40">
                        <el-col :span="8">
                            <el-form-item
                                class="required-label-item"
                                label="租户类型"
                            >
                                <el-input
                                    :disabled="true"
                                    placeholder="请输入"
                                    :value="
                                        basicForm.tenantType == '0'
                                            ? '个人'
                                            : '企业'
                                    "
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                class="required-label-item"
                                label="姓名"
                            >
                                <el-input
                                    :disabled="true"
                                    placeholder="请输入"
                                    v-model="basicForm.tenantName"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                class="required-label-item"
                                label="联系电话"
                            >
                                <el-input
                                    :disabled="true"
                                    type="number"
                                    placeholder="请输入"
                                    v-model="basicForm.contactPhone"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                class="required-label-item"
                                label="电子邮箱"
                            >
                                <el-input
                                    :disabled="true"
                                    placeholder="请输入"
                                    v-model="basicForm.email"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="性别" prop="sex">
                                <el-radio-group v-model="basicForm.sex">
                                    <el-radio :label="'0'">男</el-radio>
                                    <el-radio :label="'1'">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="年龄" prop="age">
                                <el-input
                                    type="number"
                                    placeholder="请输入"
                                    v-model="basicForm.age"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="职业" prop="fkProfessionId">
                                <el-select v-model="basicForm.fkProfessionId">
                                    <el-option
                                        v-for="item in occupation"
                                        :key="item.pkBasicdataId"
                                        :value="item.pkBasicdataId"
                                        :label="item.itemName"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="工作单位" prop="workUnit">
                                <el-input
                                    v-model="basicForm.workUnit"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="身份证号" prop="idcardNumber">
                                <el-input
                                    :disabled="true"
                                    placeholder="请输入身份证号"
                                    v-model="basicForm.idcardNumber"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="14">
                            <el-form-item
                                label="身份证正反面"
                                class="update-img"
                                label-width="120px"
                            >
                                <up-img
                                    v-model="basicForm.front"
                                    imgWidth="150px"
                                    imgHeight="100px"
                                    :imgLength="1"
                                    ref="frontUpImg"
                                    btnImg="/static/images/IDCardFront.png"
                                >
                                </up-img>
                                <up-img
                                    v-model="basicForm.back"
                                    imgWidth="150px"
                                    imgHeight="100px"
                                    :imgLength="1"
                                    ref="backUpImg"
                                    btnImg="/static/images/IDCardBack.png"
                                >
                                </up-img>
                                <!-- <el-upload :show-file-list="false" :multiple="true" list-type="picture-card">
                  <div class="el-upload__tip" slot="tip">身份证正面</div>
                </el-upload> -->
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="备注及其他">
                                <el-input
                                    type="textarea"
                                    show-word-limit
                                    maxlength="200"
                                    :rows="3"
                                    v-model="basicForm.remarks"
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </template>
                <template v-else-if="userType === 'enterprise'">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="租户类型" prop="requiredRules">
                                <el-input
                                    :disabled="true"
                                    placeholder="请输入"
                                    :value="
                                        basicForm.tenantType == '0'
                                            ? '个人'
                                            : '企业'
                                    "
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="公司名称" prop="requiredRules">
                                <el-input
                                    :disabled="true"
                                    placeholder="请输入"
                                    v-model="basicForm.tenantName"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="公司地址" prop="requiredRules">
                                <el-input
                                    :disabled="true"
                                    type="number"
                                    placeholder="请输入"
                                    v-model="basicForm.address"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item
                                class="required-label-item"
                                label="联系人"
                            >
                                <el-input
                                    :disabled="true"
                                    placeholder="请输入"
                                    v-model="basicForm.contacts"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                class="required-label-item"
                                label="联系电话"
                            >
                                <el-input
                                    :disabled="true"
                                    placeholder="请输入"
                                    v-model="basicForm.contactPhone"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                class="required-label-item"
                                label="电子邮箱"
                            >
                                <el-input
                                    :disabled="true"
                                    placeholder="请输入"
                                    v-model="basicForm.email"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="企业法人" prop="requiredRules">
                                <el-input
                                    :disabled="true"
                                    placeholder="请输入"
                                    v-model="basicForm.enterpriseLegalPerson"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                class="required-label-item"
                                label-width="1.5rem"
                                label="统一信用证代码"
                            >
                                <el-input
                                    :disabled="true"
                                    placeholder="请输入"
                                    v-model="basicForm.idcardNumber"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="营业执照">
                                <!-- <el-input placeholder="请输入" v-model="basicForm.idcardNumber"></el-input> -->
                                <up-img
                                    ref="upImg"
                                    :imgList="basicForm.fkUpPhotoId"
                                    imgWidth="3rem"
                                    imgHeight="2rem"
                                    :close="false"
                                    :imgLength="0"
                                ></up-img>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="备注及其他">
                                <el-input
                                    type="textarea"
                                    :rows="3"
                                    placeholder="请输入"
                                    show-word-limit
                                    maxlength="200"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </template>
            </el-form>
            <el-row justify="center" style="margin-top: 0.2rem">
                <el-col :span="6" :offset="10">
                    <el-button
                        type="primary"
                        @click="submitForm"
                        :loading="hasSubmit"
                        >确定</el-button
                    >
                    <el-button @click="colse">取消</el-button>
                    <el-button @click="repwd">重置密码</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</el-scrollbar>
</template>

<script>
import upImg from '@/components/upImg'
import { getTenantById, updateTenant, resetPassword } from "@/api/operations/tenant/tenant.js";
import { getPosition, getOneAll, selectNameToId } from "@/api/common/common.js";

export default {
    components: {
        upImg
    },
    data() {
        return {
            hasSubmit: false,
            isUpdate: false, //是否修改
            loading: false,
            userType: "personal", //personal 个人 ,enterprise 企业
            occupation: [],
            basicForm: {
                fkUpPhotoId: "",
                createdBy: 1,
                lastUpdatedBy: 1,
            },
            rules: {},
        };
    },
    methods: {
        repwd() {
            resetPassword(this.basicForm.contactPhone,this.basicForm.pkTenantId).then(res => {
                if (res.code === 10000) {
                    this.$message.success(res.msg);
                }
            });
        },
        loadDetail(id) {
            getTenantById(id).then((res) => {
                let { data } = res;
                this.basicForm = data;
                if (this.basicForm.fkUpPhotoId) {
                    let imgs = this.basicForm.fkUpPhotoId.split(',');
                    if (imgs[0]) {
                        this.basicForm.front = imgs[0];
                    }
                    if (imgs[1]) {
                        this.basicForm.back = imgs[1];
                    }
                }
            }).finally(_ => {
                this.loading = false;
            });
        },
        submitForm() {
            this.$refs["basicForm"].validate((valid) => {
                if (valid) {
                    this.hasSubmit = true;
                    if (this.isUpdate) {
                        this.$refs['frontUpImg'].submit().then(() => {
                            this.$refs['backUpImg'].submit().then(() => {
                                this.basicForm.fkUpPhotoId = "";
                                if (this.basicForm.front) {
                                    this.basicForm.fkUpPhotoId += (this.basicForm.front + ',');
                                }
                                if (this.basicForm.back) {
                                    this.basicForm.fkUpPhotoId += (this.basicForm.back + ',');
                                }
                                if (this.basicForm.fkUpPhotoId) {
                                    this.basicForm.fkUpPhotoId = this.basicForm.fkUpPhotoId.substr(0, this.basicForm.fkUpPhotoId.length - 1)
                                }
                                updateTenant(this.basicForm).then((result) => {
                                    if (result.code === 10000) {
                                        this.$message.success(result.msg);
                                        this.colse();
                                    }
                                }).finally(_ => {
                                    this.hasSubmit = false;
                                });
                            });
                        });
                    }
                }
            });
        },
        colse() {
            this.$router.push("/tenant/list");

            //let rex = this.$route.matched[this.$route.matched.length - 1].regex;
            //this.$store.commit("delTabs", rex);
        },
    },
    mounted() {
        getOneAll(selectNameToId('occupation')).then(res => {
            this.occupation = res.data;
        });
        getPosition(0).then((result) => {
            this.provinces = result.data;
        });
        let params = this.$route.params;
        this.userType = params.type || "personal"; //默认个人
        if (params.id) {
            this.loading = true;
            this.isUpdate = true;
            this.loadDetail(params.id);
        }
    },
};
</script>
<style scoped>
/deep/ .el-upload--picture-card {
    width: 234px;
    height: 156px;
}

/deep/ .el-upload--picture-card {
    background-image: url(../../../assets/img/housing/IDCardFront.png);
}

/deep/ .back-id-card .el-upload--picture-card {
    background-image: url(../../../assets/img/housing/IDCardBack.png);
}

>>> .update-img .el-form-item__content {
    display: flex;
}

>>> .update-img .el-form-item__content div {
    margin-right: 0.1rem;
}
</style>
